<template>
	<view class="question" :class="{'no-border':!question.dataList.length}">
		<view class="title" v-if="isModel">
			<view class="title-name">
				<u-input placeholder="請輸入模塊名稱" :border="true" v-model="question.moduleName"></u-input>
			</view>
			<view class="modules">
			<view class="delete-module" @click="addFragment">保存為模塊庫</view>
			<view class="delete-module" @click='deleteModule'>刪除模塊</view>
			</view>
		</view>
		<view class="e-question" v-for="(item,index) in question.dataList" :key="index">
			<view class="q-item">
				<view class="q-item-title-box">
					<view class="q-item-title-wrap">
						<view class="q-index">
							{{index+1}}、
						</view>
						<view class="q-item-title">
							<u-input placeholder="请输入題目描述" :border="true" v-model="item.title"></u-input>
						</view>
					</view>
					<view class="delete-question" @click='deleteQuestions(index)'>
						刪除題目
					</view>
				</view>
				<u-radio-group v-if="item.type === 'radio'" disabled v-model="item.value" placement="column" wrap>
					<u-radio :customStyle="{marginBottom: '8px'}" v-for="(sitem, sindex) in item.options" :key="sindex"
						:name="sindex+1" @change="radioChange">
						<view class="content-wrap">
							<view class="q-content" v-for="(ssitem,ssindex) in sitem.content" :key="ssindex">
								<u-input v-if="ssitem.type === 'input'" :border="true" placeholder="請輸入描述"
									v-model="ssitem.value"></u-input>
								<u-input v-else-if="ssitem.type === 'text'" disabled class="disabled"
									placeholder="這是給用戶輸入的" :border="true" v-model="ssitem.value"></u-input>
								<view v-else-if="ssitem.type === 'date'" class="date">
									<u-input placeholder="用戶點擊可選擇日期" disabled class="disabled" :border="true"
										v-model="ssitem.value"></u-input>
								</view>
								<view v-else-if="ssitem.type === 'time'" class="date">
									<u-input placeholder="用戶點擊可選擇時間" disabled class="disabled" :border="true"
										v-model="ssitem.value"></u-input>
								</view>
								<view v-else-if="ssitem.type === 'upload'">
									<u-upload :max-size="5 * 1024 * 1024" max-count="6"
										:auto-upload="false"
										:file-list="ssitem.fileList"
										@on-choose-complete='onChoose'
										></u-upload>
								</view>
							</view>
							<view class="component" @click.stop="onAddcomponentsClick(item,sitem)">
								<image src="../../../static/add-icon.png" mode=""></image>
							</view>
							<view class="component" @click.stop="onDeleteOptionClick(item,sindex)">
								<image src="../../../static/delete-icon.png" mode=""></image>
							</view>
						</view>
					</u-radio>
				</u-radio-group>
				<u-checkbox-group v-if="item.type === 'select'" wrap>
					<u-checkbox v-model="sitem.checked" disabled v-for="(sitem, sindex) in item.options" :key="sindex"
						:name="sindex+1">
						<view class="content-wrap">
							<view class="q-content" v-for="(ssitem,ssindex) in sitem.content" :key="ssindex">
								<u-input v-if="ssitem.type === 'input'" :border="true" placeholder="請輸入"
									v-model="ssitem.value"></u-input>
								<u-input v-else-if="ssitem.type === 'text'" disabled class="disabled"
									placeholder="這是給用戶輸入的" :border="true" v-model="ssitem.value"></u-input>
								<view v-else-if="ssitem.type === 'date'" class="date">
									<u-input placeholder="用戶點擊可選擇日期" disabled class="disabled" :border="true"
										v-model="ssitem.value"></u-input>
								</view>
								<view v-else-if="ssitem.type === 'time'" class="date">
									<u-input placeholder="用戶點擊可選擇時間" disabled class="disabled" :border="true"
										v-model="ssitem.value"></u-input>
								</view>
								<view v-else-if="ssitem.type === 'upload'">
									<u-upload :file-list="ssitem.fileList" :auto-upload="false" @on-choose-complete='onChoose'></u-upload>
								</view>
							</view>
							<view class="component" @click.stop="onAddcomponentsClick(item,sitem)">
								<image src="../../../static/add-icon.png" mode=""></image>
							</view>
							<view class="component" @click.stop="onDeleteOptionClick(item,sindex)">
								<image src="../../../static/delete-icon.png" mode=""></image>
							</view>
						</view>
					</u-checkbox>
				</u-checkbox-group>
				<u-input style="width: 400rpx;margin-left: 42rpx;" v-if="item.type === 'input'" disabled
					class="disabled" placeholder="請輸入" :border="true"></u-input>
				<u-upload v-if="item.type === 'upload'" :auto-upload="false" @on-choose-complete='onChoose'></u-upload>
				<u-input style="width: 400rpx;margin-left: 42rpx;" v-if="item.type === 'date'" placeholder="點擊選擇日期"
					disabled v-model="item.value" class="disabled" :border="true"></u-input>
				<u-input style="width: 400rpx;margin-left: 42rpx;" v-if="item.type === 'time'" placeholder="點擊選擇時間"
					disabled v-model="item.value" class="disabled" :border="true"></u-input>
				<view class="image-wrap" v-if="item.exampleFileList&&item.exampleFileList.length">
					<view class="tips">
						示意圖
					</view>
					<view class="image-list">
						<view class="each-list" v-for="(image,imageIndex) in item.exampleFileList" :key='index'>
							<image class="show-image" :src="image" @click.stop="previewImage(image)" mode=""></image>
							<view class="close-image" @click.stop="deleteImage(item,imageIndex)">
								<image src="../../../static/union@2x.png" mode=""></image>
							</view>
						</view>
					</view>
				</view>

				<view class="bott-btns">
					<view v-if="item.type === 'radio'||item.type === 'select'" class="btn" @click="addOptions(item)">
						添加選項
					</view>
					<view class="btn" @click="moveUp(index)">
						上移
					</view>
					<view class="btn" @click="moveDown(index)">
						下移
					</view>
					<view class="center uppic" @click="uppic(item)">
						<view class="center uppicborder">
							<view class="btn">
								上傳示意圖
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<u-action-sheet :list="list" v-model="showSheet" @click="onSheetClick"></u-action-sheet>
		<u-popup v-model="showPopup" border-radius="14" mode="center" width="600rpx" height="300rpx">
			<view class="popup-content">
				<view class="popup-tips">
					提示
				</view>
				<view class="popup-c">
					{{popupTitle}}
				</view>
				<view class="popup-btns">
					<view class="btn" @click="showPopup = false">
						取消
					</view>
					<view class="btn" @click="onComfirm">
						確定
					</view>
				</view>
			</view>
		</u-popup>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import {
		baseUrl
	} from "@/api/url.js"
	export default {
		name: 'eachQuestion',
		props: {
			question: {
				type: Object,
				default () {
					return {}
				}
			},
			isModel: { // 是模块片段的时候不显示模块名称相关内容,就会传false过来，为了兼容以前的内容
				type: Boolean,
				default: true
			}
		},
		data() {
			return {
				showSheet: false,
				showPopup: false,
				list: [{
						text: '單項填空',
						type: 'input-text'
					},
					{
						text: '用戶輸入框',
						type: 'text'
					},
					{
						text: '選項描述框',
						type: 'input'
					},
					{
						text: '日期',
						type: 'date'
					},
					{
						text: '時間',
						type: 'time'
					},
					{
						text: '上傳圖片',
						type: 'upload'
					},
				],
				popupTitle: '',
				curItem: null,
				curSItem: null,
				curIndex: null,
				curSIndex: null,
				deleteType: null,
				action: baseUrl + '/api/apict/uploadfile',
			}
		},
		methods: {
			// 下移動
			moveDown(index) {
				if (index < this.question.dataList.length - 1) {
					const item = this.question.dataList.splice(index, 1)[0];
					this.question.dataList.splice(index + 1, 0, item);
				}
			},
			// 上移動
			moveUp(index) {
				if (index > 0) {
					const item = this.question.dataList.splice(index, 1)[0];
					this.question.dataList.splice(index - 1, 0, item);
				}
			},
			// 添加組件
			onAddcomponentsClick(item, sitem) {
				this.curItem = item
				this.curSItem = sitem
				this.showSheet = true
			},
			// 點擊刪除選項按鈕
			onDeleteOptionClick(item, sindex) {
				this.deleteType = 'deleteOptions'
				this.curItem = item
				this.curSIndex = sindex
				this.popupTitle = '確定刪除此選項嗎？'
				this.showPopup = true
			},
			//點擊保存為模塊庫
			addFragment() {
				this.$emit('addFragment')
			},
			// 確定刪除選項/題目
			onComfirm() {
				if (this.deleteType === 'deleteOptions') {
					this.curItem.options.splice(this.curSIndex, 1)
				} else if (this.deleteType === 'deleteQuestion') {
					this.question.dataList.splice(this.curIndex, 1)
				} else {
					this.$emit('deleteModule')
				}
				this.showPopup = false
			},
			// 點擊添加組件
			onSheetClick(index) {
				let type = this.list[index].type
				switch (type) {
					case 'input-text':
						console.log(this.curItem)
						console.log(this.curSItem)
						this.curSItem.content.push({
							type: 'input',
							value: ''
						}, {
							type: 'text',
							value: ''
						})
						break;
					case 'date':
						this.curSItem.content.push({
							type: 'input',
							value: ''
						}, {
							type: 'date',
							value: ''
						})
						break;
					case 'time':
						this.curSItem.content.push({
							type: 'input',
							value: ''
						}, {
							type: 'time',
							value: ''
						})
						break;
					case 'upload':
						this.curSItem.content.push({
							type: 'input',
							value: ''
						}, {
							type: 'upload',
							fileList: []
						})
						break;
					case 'text':
						this.curSItem.content.push({
							type: 'text',
							value: ''
						})
						break;
					case 'input':
						this.curSItem.content.push({
							type: 'input',
							value: ''
						})
						break;
					default:
						break;
				}
			},
			// 添加選項
			addOptions(item) {
				item.options.push({
					content: []
				})
			},
			//刪除題目
			deleteQuestions(index) {
				this.deleteType = 'deleteQuestion'
				this.curIndex = index
				this.popupTitle = '確定刪除此題目嗎？'
				this.showPopup = true
			},
			// 刪除模塊
			deleteModule() {
				this.deleteType = 'deleteModule'
				this.popupTitle = '確定刪除此模塊嗎'
				this.showPopup = true
			},
			uppic(target) {
				uni.chooseImage({
					sizeType: ['compressed'],
					sourceType: ['album', 'camera'],
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						this.$Loading("上传中")
						let uploadedCount = 0;
						tempFilePaths.forEach((item) => {
							uni.uploadFile({
								header: {
									'token': uni.getStorageSync('userToken')
								},
								url: this.action, //仅为示例，非真实的接口地址
								filePath: item,
								formData: {
									uid: uni.getStorageSync("uid")
								},
								name: 'file',
								success: (uploadFileRes) => {
									let data = JSON.parse(uploadFileRes.data);
									uploadedCount++;
									// this.$Toast(data.msg)
									if (data.data.code === 1) {
										target.exampleFileList.push(baseUrl + data.data
											.url)
									} else {
										this.$Toast(data.msg)
									}
								},
								fail: (err) => {
									let errMsg = JSON.parse(err.data)
									this.$Toast(errMsg.msg)
								},
								complete: () => {
									this.$Toast("上传成功")
								}
							});
						})

					}
				});
			},
			deleteImage(target, index) {
				target.fileList.splice(index, 1)
			},
			previewImage(image){
				var imgArr = [];
				imgArr.push(image);
				//预览图片
				uni.previewImage({
					urls: imgArr,
					current: imgArr[0]
				});
			
			},
			onChoose(){
				this.$refs.uToast.show({
					title: '请勿上传，需用户上传',
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.question {
		padding: 24rpx 24rpx 0;
		border: 1px solid #F6F6F6;
		border-radius: 10rpx;

		.title {
			margin-bottom: 20rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 24rpx;

			.title-name {
				width: 800rpx;
			}
			.modules{
				display: flex;
				.delete-module {
					color: #fff;
					cursor: pointer;
					background: #3A78FC;
					border-radius: 6px;
					padding: 12rpx 24rpx;
					&:first-child{
						margin-right: 20rpx;
					}
				}
			}
			
		}

		.e-question {
			.q-item {
				border: 1px solid #F6F6F6;
				background: #F6F6F6;
				border-radius: 10rpx;
				padding: 24rpx;
				margin-bottom: 24rpx;

				.q-item-title-box {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.q-item-title-wrap {
						display: flex;
						align-items: center;
						margin-bottom: 24rpx;
					}

					.delete-question {
						color: #fff;
						padding: 12rpx 24rpx;
						cursor: pointer;
						background: #3A78FC;
						border-radius: 6px;
					}
				}
			}

			.content-wrap {
				display: flex;
				padding: 12rpx 0;
				flex-wrap: wrap;
				align-items: center;
				gap: 12rpx;
			}

			.component {
				margin: 4rpx 12rpx;
				color: #409eff;
				cursor: pointer;
				position: relative;

				>image {
					width: 46rpx;
					height: 46rpx;
					margin-top: 20rpx;
				}

				.op-list {
					position: absolute;
					right: -200rpx;
					bottom: 0;
					background: red;
					width: 200rpx;
					height: 400rpx;
					z-index: 1;
				}
			}
		}
	}
	.no-border{
		border: none;
	}
	.disabled {
		background: #dce0eb;
	}

	.bott-btns {
		display: flex;
		justify-content: flex-end;
		align-items: center;
		padding-top: 24rpx;
		gap: 24rpx;

		.btn {
			color: #3A78FC;
			cursor: pointer;
			border-radius: 6px 6px 6px 6px;
			border: 1px solid #3A78FC;
			padding: 12rpx 24rpx;
		}
	}

	.popup-content {
		padding-top: 24rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
		height: 300rpx;

		.popup-tips {
			font-size: 36rpx;
			text-align: center;
			color: red;
		}

		.popup-btns {
			display: flex;
			width: 100%;
			border-top: 1px solid #ebedf0;

			.btn {
				width: 50%;
				text-align: center;
				line-height: 88rpx;
				cursor: pointer;

				&:first-child {
					border-right: 1px solid #ebedf0;
					color: #323233;
				}

				&:last-child {
					color: red;
				}
			}
		}
	}

	::v-deep .is-text-box {
		display: none;
	}

	.image-wrap {
		margin: 24rpx 20px;

		.tips {
			color: #3A78FC;
			margin-bottom: 24rpx;
		}

		.image-list {
			display: flex;
			gap: 24rpx;
			flex-wrap: wrap;

			.each-list {
				position: relative;
				width: 180rpx;
				height: 180rpx;

				.show-image {
					width: 180rpx;
					height: 180rpx;
					outline: 1px solid #E7E7E7;
					border-radius: 4rpx;
				}

				.close-image {
					width: 36rpx;
					height: 36rpx;
					position: absolute;
					top: 0;
					right: 0;
					z-index: 1;
					display: flex;
					justify-content: center;
					align-items: center;
					background: rgba(0, 0, 0, 0.4);
					border-top-right-radius: 4rpx;
					cursor: pointer;

					>image {
						width: 16rpx;
						height: 16rpx;
					}
				}
			}
		}
	}
</style>